<template>
	<view class="golive">
		<view>
			<view class="live-wrap">
				<ul class="live-info" v-if="myInfo">
					<li class="item cover-img-wrap">
						<view class="live-status" v-if="myInfo.apply_status == 'applying'">待审核</view>
						<view class="live-status" v-else-if="myInfo.apply_status == 'disagree'">审核未通过</view>
						<view class="live-status" v-else-if="myInfo.live_status == '102'">待直播</view>
						<view class="live-status" v-else-if="myInfo.live_status == '101'">直播中</view>
						<view class="live-status" v-else-if="myInfo.live_status == '103'">直播已结束</view>
						<view class="live-status" v-else-if="myInfo.live_status == '104'">禁播</view>
						<view class="live-status" v-else-if="myInfo.live_status == '105'">直播间暂停</view>
						<view class="live-status" v-else-if="myInfo.live_status == '106'">直播异常中断</view>
						<view class="live-status" v-else-if="myInfo.live_status == '107'">直播已过期</view>
						<image class="cover-img" mode="aspectFill" :src="myInfo.cover_img"></image>
						<text class="title">{{ myInfo.name }}</text>
					</li>
					<li class="item"><image class="myheader" :src="myInfo.avatarUrl"></image></li>
					<li class="item">
						<text class="nickName">昵称: {{ myInfo.anchorName }}</text>
					</li>
					<li class="item">
						<text class="time">开始时间: {{ showDate(liveStartTime * 1000) }}</text>
					</li>
					<li class="item">
						<!-- #ifdef MP-WEIXIN -->
						<button class="live-buttom" @click="goliveto">去直播</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="live-buttom" @click="preImg(myInfo.goto_liveplayer_code_url)">去直播</button>
						<!-- #endif -->
					</li>
				</ul>
				<view class="not_live" v-else>未申请直播间</view>
			</view>

			<view class="Applyforlivebox">
				<view class="Apply-for-a-studioone"><button class="Apply-for-a-studio" @click="Applyforastudioto">申请直播间</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import ApplyforastudioTo from '../Applyforastudio-to/Applyforastudio-to.vue';
import { wx_liveplayer_getinfo } from '@/utils/api.js';
export default {
	data() {
		return {
			token: this.$store.getters.getToken,
			liveStartTime: null,
			myInfo: {}
		};
	},
	components: {
		// ApplyforastudioTo
	},
	created() {
		this.getList();
		console.log(this.myInfo);
	},
	methods: {
		// 将时间戳转换为 m月d日 h:m
		showDate(time = +new Date()) {
			let date = new Date(time + 8 * 3600 * 1000);
			let startTime = date
				.toJSON()
				.substr(5, 11)
				.replace('T', '日 ')
				.replace(/-/g, '.')
				.replace('.', '月');
			console.log('开始时间：', startTime);
			return startTime;
		},
		getList() {
			let data = {
				token: this.token,
				account_id: this.$store.getters.getUserId
			};
			wx_liveplayer_getinfo(data).then(res => {
				console.log(res);
				if (res.status) {
					this.myInfo = res.data;
					this.liveStartTime = this.myInfo.startTime;
					console.log('开始时间：', this.myInfo.startTime);
				}
			});
		},
		//直播
		goliveto() {
			// let roomId = this.myInfo.roomId // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
			// let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
			// wx.navigateTo({
			//     url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
			// })
			wx.navigateToMiniProgram({
				appId: 'wxcbbd86b156ae4441', //小程序appid
				//**重点**要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）
				// envVersion: 'develop',
				success(res) {
					// 打开成功
				}
			});
		},
		//点击跳转到申请直播
		Applyforastudioto() {
			uni.navigateTo({
				url: '../Applyforastudio-to/Applyforastudio-to'
			});
		}
	},
	onLoad() {}
};
</script>

<style scoped>
ul {
	padding: 0;
}

li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.golive {
	padding-top: 1upx;
	width: 100vw;
	height: 100vh;
	background: #f5f6f9;
}

.not_live {
	height: 400upx;
	line-height: 400upx;
	color: #999;
}

.live-wrap {
	display: flex;
	justify-content: center;
	width: 90%;
	margin: 5%;
	padding: 20upx;
	box-sizing: border-box;
	border-radius: 10upx;
	background: #fff;
}
.Applyforlivebox {
	width: 100%;
	height: 120upx;
}

.live-wrap .item {
	position: relative;
	flex: 100%;
	text-align: center;
}

.live-info .live-status {
	position: absolute;
	left: 36upx;
	top: 40upx;
	font-size: 24upx;
	color: #fff;
	height: 50upx;
	line-height: 50upx;
	padding: 0 20upx;
	background: linear-gradient(270deg, rgba(255, 64, 64, 1) 0%, rgba(255, 121, 62, 1) 100%);
	border-radius: 0upx 24upx 24upx 0upx;
	z-index: 999;
}

.cover-img-wrap {
	position: relative;
}

.live-info .cover-img {
	width: 360upx;
	height: 540upx;
	border-radius: 30upx;
}

.live-info .title {
	position: absolute;
	left: 50%;
	bottom: 20upx;
	transform: translateX(-50%);
	font-size: 32upx;
	color: #fff;
}

.live-info .myheader {
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
}

.live-info .nickName {
	font-size: 32upx;
	color: #666;
}

.live-info .time {
	font-size: 30upx;
	color: #999;
}

.live-info .live-buttom {
	font-size: 36upx;
	color: #fff;
	border-radius: 40upx;
	width: 430upx;
	height: 80upx;
	margin: 6upx auto;
	background: linear-gradient(#cbec00, #00a66a);
	box-shadow: 0upx 8upx 16upx 0upx rgba(0, 166, 106, 0.4);
}

.Apply-for-a-studio {
	font-size: 36upx;
	color: #fff;
	width: 670upx;
	height: 80upx;
	margin: 0 auto;
	margin-top: 160upx;
	background: linear-gradient(#cbec00, #00a66a);
	box-shadow: 0 8upx 16upx 0 #00a66a;
	border-radius: 44upx;
	margin-bottom: 30upx;
}
</style>
